import React, { useState, useEffect } from 'react';
import { 
  Card, 
  Row, 
  Col, 
  Statistic, 
  Button,
  Space,
  message,
  Descriptions,
  Tag,
  Divider
} from 'antd';
import { 
  UserOutlined, 
  TrophyOutlined,
  CalendarOutlined,
  CloseOutlined
} from '@ant-design/icons';
import './StudentStats.scss';

const StudentStats = ({ student, onClose }) => {
  const [studentDetail, setStudentDetail] = useState(null);

  useEffect(() => {
    if (student?.id) {
      fetchStudentDetail(student.id);
    }
  }, [student]);

  // 获取学生详情
  const fetchStudentDetail = async (studentId) => {
    try {
      const response = await fetch(`/api/student/${studentId}`);
      const data = await response.json();

      if (data.code === 200) {
        setStudentDetail(data.data);
      } else {
        message.error(data.message || '获取学生详情失败');
      }
    } catch (error) {
      console.error('获取学生详情失败:', error);
      message.error('网络错误，请稍后重试');
    }
  };

  if (!studentDetail) {
    return (
      <div className="student-stats">
        <div className="loading">加载中...</div>
        </div>
    );
  }

  return (
    <div className="student-stats">
      {/* 头部信息 */}
      <div className="stats-header">
        <h2>学生统计信息</h2>
        <Space>
          <Button icon={<CloseOutlined />} onClick={onClose}>
            关闭
          </Button>
        </Space>
      </div>

      <Divider />

      {/* 基本信息统计 */}
      <Card title="基本信息统计" className="basic-stats">
        <Row gutter={16}>
          <Col span={6}>
            <Statistic
              title="等级"
              value={studentDetail.level || 1}
              prefix={<TrophyOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="经验值"
              value={studentDetail.experience || 0}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="金币"
              value={studentDetail.coin || 0}
              prefix={<TrophyOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="签到天数"
              value={studentDetail.sign || 0}
              prefix={<CalendarOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Col>
        </Row>
      </Card>

      <Divider />

      {/* 详细信息 */}
      <Card title="详细信息" className="detail-stats">
        <Descriptions column={2} bordered>
          <Descriptions.Item label="用户名">
            {studentDetail.username}
          </Descriptions.Item>
          <Descriptions.Item label="昵称">
            {studentDetail.nickname || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={studentDetail.status === 'active' ? 'green' : 'red'}>
              {studentDetail.status === 'active' ? '活跃' : '非活跃'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="性别">
            {studentDetail.gender === 'male' ? '男' : 
             studentDetail.gender === 'female' ? '女' : '未知'}
          </Descriptions.Item>
          <Descriptions.Item label="购买课时">
            {studentDetail.total_lessons || 0}
          </Descriptions.Item>
          <Descriptions.Item label="已用课时">
            {studentDetail.used_lessons || 0}
          </Descriptions.Item>
          <Descriptions.Item label="注册时间">
            {studentDetail.created_at ? 
              new Date(studentDetail.created_at).toLocaleString() : '-'
            }
          </Descriptions.Item>
          <Descriptions.Item label="最后登录">
            {studentDetail.last_login_at ? 
              new Date(studentDetail.last_login_at).toLocaleString() : '从未登录'
            }
          </Descriptions.Item>
        </Descriptions>
      </Card>



      {/* 备注信息 */}
      {studentDetail.remark && (
        <>
          <Divider />
          <Card title="备注信息" className="remark-stats">
            <p>{studentDetail.remark}</p>
      </Card>
        </>
      )}
    </div>
  );
};

export default StudentStats; 